<template>
  <div class="exam-container">
    <div class="exam-box">
      <div class="subject">{{ Title }}</div>
      <div class="detail">
        <span class="count">题量：{{ Count }}</span>
        <span>满分：{{ Score }}</span>
        <!-- <span>创建者：Tom</span> -->
        <span>答题者：{{ $store.state.user.name }}</span>
        <span v-show="$route.query.kind == 1">
          作答时间：
          <span class="hour" v-show="hour != 0">{{ hour }}小时</span>
          <span class="minute" v-show="minute != -1">{{ minute }}分钟</span>
        </span>
        <span v-show="$route.query.kind == 0">
          <span class="hour">截止时间：{{ finalTime }}</span>
        </span>
      </div>
      <div class="intro">
        <p>
          注意：请在离开时选择保存你选择的选项，避免意外的情况导致你选择的作业未被保存，影响到你的心情，请在离开时保存你的作业，或提交，谢谢
          ^_^
        </p>
      </div>
    </div>

    <!-- 单选 -->
    <div class="topic" v-show="topic.radio.length != 0">
      <h2 class="topic_tile">一、单选题（共 {{ topic.radio.length }} 题， {{ totalScore[0] }}分）</h2>
      <radio :radioTopic="topic.radio" />
    </div>

    <!-- 多选 -->
    <div class="topic" v-show="topic.multiple.length != 0">
      <h2 class="topic_tile">二、多选题（共 {{ topic.multiple.length }} 题， {{ totalScore[1] }}分）</h2>
      <multiple :multipleTopic="topic.multiple" />
    </div>

    <!-- 判断 -->
    <div class="topic" v-show="topic.judge.length != 0">
      <h2 class="topic_tile">三、判断题（共 {{ topic.judge.length }} 题， {{ totalScore[2] }}分）</h2>
      <judge :judgeTopic="topic.judge" />
    </div>

    <!-- 填空 -->
    <div class="topic" v-show="topic.filling.length != 0">
      <h2 class="topic_tile">四、填空题（共 {{ topic.filling.length }} 题， {{ totalScore[3] }}分）</h2>
      <filling :fillTopic="topic.filling" />
    </div>

    <!-- 综合 -->
    <div class="topic" v-show="topic.synthesize.length != 0">
      <h2 class="topic_tile">
        五、综合题（共 {{ topic.synthesize.length }} 题，
        {{ totalScore[4] }}分）
      </h2>
      <synthesize :synthesizeTopic="topic.synthesize" />
    </div>
  </div>
</template>

<script>
import radio from '@/components/content/topicType/radio';
import Multiple from '@/components/content/topicType/multiple';
import Judge from '@/components/content/topicType/judge';
import Filling from '@/components/content/topicType/filling';
import Synthesize from '@/components/content/topicType/synthesize';

import Bus from '@/common/bus';

export default {
  name: 'exam',
  components: {
    radio /* 单选 */,
    Multiple /* 多选 */,
    Judge /* 判断 */,
    Filling /* 填空 */,
    Synthesize /* 综合 */,
  },
  data() {
    return {
      topic: {
        radio: [],
        multiple: [],
        judge: [],
        filling: [],
        synthesize: [],
      },
      hour: 0,
      minute: 0,
      Title: null,
      Score: 0,
      Count: 0,
      totalScore: [0, 0, 0, 0, 0],
      finalTime: null,
    };
  },
  mounted() {
    this._timeChange();
  },
  created() {
    this.initTopic();
  },
  methods: {
    initTopic() {
      // 1. 获取作业的编号
      let topicdata = JSON.parse(sessionStorage.getItem('topicInfo')); /* 课程号 */
      let topicId = topicdata.id; /* 班级id */
      let courseId = this.$route.query.courseId; /* 课程id */
      let studentId = this.$store.state.user.id; /* 学生id */

      // 2. 获取题目
      if (this.$route.query.kind == 0) {
        // 获取作业
        this.getWork(courseId, topicId, studentId);
      }

      if (this.$route.query.kind == 1) {
        // 获取考试
        this.getExam(courseId, topicId, studentId);
      }
    },

    // 获取考试试卷信息
    getExam(courseId, topicId, studentId) {
      this.$http({
        url: this.$http.adornUrl(`/edu-task/s_selectTopicByTaskId/${courseId}/${topicId}/${studentId}`),
        method: 'get',
        params: this.$http.adornParams(),
      }).then(({ data }) => {
        if (data && data.code == 20000) {
          let exam = data.data.taskInfo;
          this.Title = exam.title;
          this.Count = exam.count;
          this.Score = exam.sorceSum;

          this.examInit(exam);

          // 传递题长度
          let initTopicTab = [this.topic.radio.length, this.topic.multiple.length, this.topic.judge.length, this.topic.filling.length, this.topic.synthesize.length];
          Bus.$emit('initTab', initTopicTab);

          // 传递是否已经提交
          let status = exam.status;
          Bus.$emit('status', status);
        } else {
          this.$message.error('数据获取失败');
        }
      });
    },

    // 获取作业试卷信息
    getWork(courseId, topicId, studentId) {
      this.$http({
        url: this.$http.adornUrl(`/edu-task/s_selectDetailTopicByTaskId/${courseId}/${topicId}/${studentId}`),
        method: 'get',
        params: this.$http.adornParams(),
      }).then(({ data }) => {
        if (data && data.code == 20000) {
          let work = data.data.taskInfo;
          this.Title = work.title;
          this.Count = work.count;
          this.Score = work.sorceSum;
          this.finalTime = work.submitTime;

          console.log(work);
          this.examInit(work);

          // 传递题长度
          let initTopicTab = [this.topic.radio.length, this.topic.multiple.length, this.topic.judge.length, this.topic.filling.length, this.topic.synthesize.length];
          Bus.$emit('initTab', initTopicTab);
        } else {
          this.$message.error('数据获取失败');
        }
      });
    },

    examInit(data) {
      if (data.topicList.length != 0) {
        for (let i = 0; i < data.topicList.length; i++) {
          switch (data.topicList[i].kind) {
            case '0':
              this.topic.radio.push(data.topicList[i]);
              this.totalScore[0] += data.topicList[i].sorce;
              break;
            case '1':
              this.topic.multiple.push(data.topicList[i]);
              this.totalScore[1] += data.topicList[i].sorce;
              break;
            case '2':
              this.topic.judge.push(data.topicList[i]);
              this.totalScore[2] += data.topicList[i].sorce;
              break;
            case '3':
              this.topic.filling.push(data.topicList[i]);
              this.totalScore[3] += data.topicList[i].sorce;
              break;
            case '4':
              this.topic.synthesize.push(data.topicList[i]);
              this.totalScore[4] += data.topicList[i].sorce;
              break;
          }
        }
      }
    },

    _timeChange() {
      let date = 1.35 * 3600; /* 120 分钟 */

      let timer = setInterval(() => {
        if (date != 0) {
          date -= 1;

          this.hour = Math.floor(date / 3600);
          this.minute = Math.floor((date - this.hour * 3600) / 60);
        } else {
          clearInterval(timer);

          this.$emit('timeOut');
        }
      }, 1000);
    },
  },
};
</script>

<style scoped>
.exam-container {
  min-width: 1000px;
  background-color: #fff;
  border-radius: 20px;
  padding-left: 40px;
  box-shadow: 0 2px 10px 0 #edeef080;
}

.exam-container .exam-box {
  margin-bottom: 50px;
}

.exam-box .subject {
  color: #181e33;
  line-height: 25px;
  padding: 30px 40px 0 0;
  font-weight: bold;
  font-size: 18px;
}
.exam-box .detail {
  padding-top: 10px;
  font-size: 14px;
  line-height: 16px;
  color: #a8a8b3;
}
.exam-box .detail span {
  margin-right: 30px;
}
.exam-box .detail .hour,
.exam-box .detail .minute {
  margin-right: 0;
}
.exam-box .intro {
  color: cadetblue;
  margin-top: 10px;
  font-size: 18px;
  width: 90%;
}

.exam-container .topic .topic_tile {
  font-size: 16px;
  color: #181e33;
  margin-bottom: 30px;
}
</style>
